<template>
  <div class="head">
    <div class="head-menu">
      <div class="current-datetime">
        <div class="current-date">{{ currentDate }}</div>
        <div class="current-time">{{ currentTime }}</div>
      </div>
      <el-select v-model="menu" placeholder="请选择" :popper-append-to-body="false" @change="changeMenu">
        <el-option v-for="item in menus" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="head-title">智慧高速综合管控系统</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [{
        value: 1,
        label: '机器人监控'
      }, {
        value: 2,
        label: '任务中心'
      },
      {
        value: 3,
        label: '任务编辑'
      },
      {
        value: 4,
        label: '数据中心'
      }],
      menu: 1,
      days: ['日', '一', '二', '三', '四', '五', '六'],
      currentDate: '',
      currentTime: ''
    }
  },
  created() {
    this.updateTime()
  },
  beforeDestroy() {
    // 清除定时器
    clearTimeout(this.updateTime)
  },
  methods: {
    changeMenu(value) {
      this.$emit('changeMenu', value)
    },
    updateTime() {
      const now = new Date()
      const month = (now.getMonth() + 1).toString().padStart(2, '0')
      const day = now.getDate().toString().padStart(2, '0')
      const weekday = now.getDay()
      this.currentDate = month + '月' + day + '日' + ' 周' + this.days[weekday]
      this.currentTime = now.toLocaleTimeString()
      setTimeout(this.updateTime, 1000)
    }
  }
}
</script>

<style scoped>
.head {
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 118px;
    background-image: url(https://img.js.design/assets/img/661df8514fbdad450f19648d.png#dc938dcae4f5107582bb763084e533d2);
}

.head-menu {
    display: flex;
    width: 270px;
    height: 36px;
    margin-left: 30px;
    margin-bottom: 20px;
    position: absolute;
    left: 0;

    .current-datetime {
        width: 100px;
        height: 36px;
        margin-right: 20px;
        color: rgba(255, 255, 255, 1);
        font-weight: 500;

        .current-date {
            font-size: 10px;
        }

        .current-time {
            font-size: 20px;
        }
    }

    .el-input__inner {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 1px;
        background: rgba(52, 59, 69, 1);
        border: 1px solid rgba(56, 195, 255, 1);
        color: rgba(255, 255, 255, 1);
    }

    .el-select-dropdown {
        background: rgba(52, 59, 69, 1);
        border: 1px solid rgba(56, 195, 255, 1);
    }

    .el-select-dropdown__item {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 1px;
        background: rgba(52, 59, 69, 1);
        color: rgba(255, 255, 255, 1);
    }

    .el-select-dropdown__item:hover {
        background-color: rgba(85, 92, 102, 1);
        font-size: 16px;
    }

    .el-select-dropdown__item.selected {
        color: #409EFF;
    }
}

.head-title {
    margin-bottom: 20px;
    width: 400px;
    height: 56px;
    /** 文本1 */
    font-size: 38px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 1);
}
</style>
